<template>
  <el-container>
    <el-header class="c1">
      详细信息
    </el-header>
    <el-container>
      <el-aside width="400px" class="c2">
        <el-image style="width: 300px;" :src=data.photo :preview-src-list="srcList">
        </el-image>
      </el-aside>
      <el-main class="c3">
        <el-divider content-position="left">商品信息</el-divider>
        <el-card class="box-card">
          <el-tag>商品名:</el-tag>{{data.goodsName}}<br>
          <el-tag>价格:</el-tag>{{data.price}}<br>
          <el-tag>简介:</el-tag>{{data.summary}}<br>
          <el-tag>剩余:</el-tag>{{data.number}}<br>
          <el-tag>状态:</el-tag><label v-if="data.state=='true'">新品</label>
          <label v-if="data.state=='false'">二手</label><br>
          <span>
            <el-button type="primary" @click="addCart">添加购物车</el-button>
            <router-link :to="{path:'/orderDetail',query:{id:data.id}}">
              <el-button type="primary">立刻购买</el-button>
            </router-link>
          </span>
        </el-card>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  export default {
    name: 'GoodsDetail',
    data() {
      return {
        id: '',
        data: [],
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    },
    mounted: function() {
      this.getData()
    },
    methods: {
      getData() {
        this.id = this.$route.query.id
        this.$axios.post('/findGoodsDetail', {
          id: this.id
        }).then(resp => {
          this.data = resp.data
        })
      },
      addCart(){
       this.$axios.post('/addCart', {
         goodsId: this.id
       }).then(resp => {
         alert("添加成功")
       })
      } 
    }
  }
</script>

<style>
  .c1 {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .c2 {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .c3 {
    background-color: #ffffff;
    color: #333;
    text-align: left;
    line-height: 10px;
    font-family: "宋体";
  }

  .text {
    font-size: 14px;

  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 80%;
  }

  .el-tag {
    margin-top: 10px;
    font-size: 20px;
    font-family: "宋体";
  }
</style>
